<!-- html -->
<template>
  <h2 class="h2">{{ title1 }}</h2>
  <span class="span3">父组件</span>
  <br>
  <span class="span2">内容：{{ text }}</span>
  <button class="button1" @click="changeText">修改内容</button>
  <button class="button1" @click="emitter.emit('parent-send-text', text)">向子组件传递内容</button>
  <hr class="hr1">
  <span class="span3">子组件</span>
  <br>
  <mittTest1Child1 />
  <hr class="hr2">
  <h2 class="h2">{{ title2 }}</h2>
  <span class="span3">父组件</span>
  <br>
  <span class="span2">子组件内容：{{ childText }}</span>
  <button class="button1" @click="changeChildText">修改内容</button>
  <hr class="hr1">
  <span class="span3">子组件</span>
  <br>
  <mittTest1Child2 />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'mittTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import emitter from '@/assets/utils/emitter'
import mittTest1Child1 from '@/components/componenttransmit/MittTest1Child1.vue'
import mittTest1Child2 from '@/components/componenttransmit/MittTest1Child2.vue'
//数据
let title1 = ref('mitt，父组件=>子组件')
let title2 = ref('mitt，父组件<=子组件')

//数据
let text = ref('hello')
let childText = ref('')
//方法
//绑定事件
emitter.on('child-send-text', (value: any) => {
  childText.value = value
})
//组件卸载时，解绑事件
onUnmounted(() => {
  emitter.off('child-send-text')
})
function changeText() {
  text.value += '-'
}
function changeChildText() {
  childText.value += '-'
}
</script>

<!-- 样式 -->
<style scoped></style>